/**
 * console demo
 */

layui.define(function (exports) {

    /*
      下面通过 layui.use 分段加载不同的模块，实现不同区域的同时渲染，从而保证视图的快速呈现
    */


    //区块轮播切换
    layui.use(['admin', 'carousel'], function () {
        var $ = layui.$
            , admin = layui.admin
            , carousel = layui.carousel
            , element = layui.element
            , device = layui.device();

        //轮播切换
        $('.layadmin-carousel').each(function () {
            var othis = $(this);
            carousel.render({
                elem: this
                , width: '100%'
                , arrow: 'none'
                , interval: othis.data('interval')
                , autoplay: othis.data('autoplay') === true
                , trigger: (device.ios || device.android) ? 'click' : 'hover'
                , anim: othis.data('anim')
            });
        });

        element.render('progress');

    });

    //数据概览
    layui.use(['admin', 'carousel', 'echarts'], function () {
        var $ = layui.$
            , admin = layui.admin
            , carousel = layui.carousel
            , echarts = layui.echarts;

        var echartsApp = [], options = [
            //今日流量趋势
            {
                title: {
                    text: '今日流量趋势',
                    x: 'center',
                    textStyle: {
                        fontSize: 14
                    }
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['', '']
                },
                xAxis: [{
                    type: 'category',
                    boundaryGap: false,
                    data: ['06:00', '06:30', '07:00', '07:30', '08:00', '08:30', '09:00', '09:30', '10:00', '11:30', '12:00', '12:30', '13:00', '13:30', '14:00', '14:30', '15:00', '15:30', '16:00', '16:30', '17:00', '17:30', '18:00', '18:30', '19:00', '19:30', '20:00', '20:30', '21:00', '21:30', '22:00', '22:30', '23:00', '23:30']
                }],
                yAxis: [{
                    type: 'value'
                }],
                series: [{
                    name: 'PV',
                    type: 'line',
                    smooth: true,
                    itemStyle: {normal: {areaStyle: {type: 'default'}}},
                    data: [111, 222, 333, 444, 555, 666, 3333, 33333, 55555, 66666, 33333, 3333, 6666, 11888, 26666, 38888, 56666, 42222, 39999, 28888, 17777, 9666, 6555, 5555, 3333, 2222, 3111, 6999, 5888, 2777, 1666, 999, 888, 777]
                }, {
                    name: 'UV',
                    type: 'line',
                    smooth: true,
                    itemStyle: {normal: {areaStyle: {type: 'default'}}},
                    data: [11, 22, 33, 44, 55, 66, 333, 3333, 5555, 12666, 3333, 333, 666, 1188, 2666, 3888, 6666, 4222, 3999, 2888, 1777, 966, 655, 555, 333, 222, 311, 699, 588, 277, 166, 99, 88, 77]
                }]
            },

            /*
            //访客浏览器分布
            {
              title : {
                text: '访客浏览器分布',
                x: 'center',
                textStyle: {
                  fontSize: 14
                }
              },
              tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
              },
              legend: {
                orient : 'vertical',
                x : 'left',
                data:['Chrome','Firefox','IE 8.0','Safari','其它浏览器']
              },
              series : [{
                name:'访问来源',
                type:'pie',
                radius : '55%',
                center: ['50%', '50%'],
                data:[
                  {value:9052, name:'Chrome'},
                  {value:1610, name:'Firefox'},
                  {value:3200, name:'IE 8.0'},
                  {value:535, name:'Safari'},
                  {value:1700, name:'其它浏览器'}
                ]
              }]
            },
            */

            //新增的用户量
            {
                title: {
                    text: '最近一周新增的用户量',
                    x: 'center',
                    textStyle: {
                        fontSize: 14
                    }
                },
                tooltip: { //提示框
                    trigger: 'axis',
                    formatter: "{b}<br>新增用户：{c}"
                },
                xAxis: [{ //X轴
                    type: 'category',
                    data: ['11-07', '11-08', '11-09', '11-10', '11-11', '11-12', '11-13']
                }],
                yAxis: [{  //Y轴
                    type: 'value'
                }],
                series: [{ //内容
                    type: 'line',
                    data: [200, 300, 400, 610, 150, 270, 380],
                }]
            }
        ]
            , elemDataView = $('#LAY-index-dataview').children('div')
            , renderDataView = function (index) {
            echartsApp[index] = echarts.init(elemDataView[index], layui.echartsTheme);
            echartsApp[index].setOption(options[index]);
            //window.onresize = echartsApp[index].resize;
            admin.resize(function () {
                echartsApp[index].resize();
            });
        };


        //没找到DOM，终止执行
        if (!elemDataView[0]) return;


        renderDataView(0);

        //触发数据概览轮播
        var carouselIndex = 0;
        carousel.on('change(LAY-index-dataview)', function (obj) {
            renderDataView(carouselIndex = obj.index);
        });

        //触发侧边伸缩
        layui.admin.on('side', function () {
            setTimeout(function () {
                renderDataView(carouselIndex);
            }, 300);
        });

        //触发路由
        layui.admin.on('hash(tab)', function () {
            layui.router().path.join('') || renderDataView(carouselIndex);
        });
    });

    //地图
    layui.use(['carousel', 'echarts'], function () {
        var $ = layui.$
            , carousel = layui.carousel
            , echarts = layui.echarts;

        var echartsApp = [], options = [
            {
                title: {
                    text: '访客地区分布',
                    subtext: '不完全统计'
                },
                tooltip: {
                    trigger: 'item'
                },
                dataRange: {
                    orient: 'horizontal',
                    min: 0,
                    max: 60000,
                    text: ['高', '低'],
                    splitNumber: 0
                },
                series: [
                    {
                        name: '访客地区分布',
                        type: 'map',
                        mapType: 'china',
                        selectedMode: 'multiple',
                        itemStyle: {
                            normal: {label: {show: true}},
                            emphasis: {label: {show: true}}
                        },
                        data: [
                            {name: '西藏', value: 60},
                            {name: '青海', value: 167},
                            {name: '宁夏', value: 210},
                            {name: '海南', value: 252},
                            {name: '甘肃', value: 502},
                            {name: '贵州', value: 570},
                            {name: '新疆', value: 661},
                            {name: '云南', value: 8890},
                            {name: '重庆', value: 10010},
                            {name: '吉林', value: 5056},
                            {name: '山西', value: 2123},
                            {name: '天津', value: 9130},
                            {name: '江西', value: 10170},
                            {name: '广西', value: 6172},
                            {name: '陕西', value: 9251},
                            {name: '黑龙江', value: 5125},
                            {name: '内蒙古', value: 1435},
                            {name: '安徽', value: 9530},
                            {name: '北京', value: 51919},
                            {name: '福建', value: 3756},
                            {name: '上海', value: 59190},
                            {name: '湖北', value: 37109},
                            {name: '湖南', value: 8966},
                            {name: '四川', value: 31020},
                            {name: '辽宁', value: 7222},
                            {name: '河北', value: 3451},
                            {name: '河南', value: 9693},
                            {name: '浙江', value: 62310},
                            {name: '山东', value: 39231},
                            {name: '江苏', value: 35911},
                            {name: '广东', value: 55891}
                        ]
                    }
                ]
            }
        ]
            , elemDataView = $('#LAY-index-pagethree-home').children('div')
            , renderDataView = function (index) {
            echartsApp[index] = echarts.init(elemDataView[index], layui.echartsTheme);
            echartsApp[index].setOption(options[index]);
            window.onresize = echartsApp[index].resize;
        };
        //没找到DOM，终止执行
        if (!elemDataView[0]) return;

        renderDataView(0);
    });

    //最新订单
    layui.use('table', function () {
        var $ = layui.$
            , table = layui.table;
        var data = [{
                "keywords": "UI"
                , "frequency": 8520
                , "userNums": 2216
            }, {
                "keywords": "layer 弹出层组件"
                , "frequency": 666
                , "userNums": 333
            }, {
                "keywords": "此表格是静态模拟数据"
                , "frequency": 666
                , "userNums": 333
            }, {
                "keywords": "前端 UI"
                , "frequency": 666
                , "userNums": 333
            }, {
                "keywords": "前端 UI"
                , "frequency": 666
                , "userNums": 333
            }, {
                "keywords": "前端 UI"
                , "frequency": 666
                , "userNums": 333
            }, {
                "keywords": "前端 UI"
                , "frequency": 666
                , "userNums": 333
            }, {
                "keywords": "前端 UI"
                , "frequency": 666
                , "userNums": 333
            }, {
                "keywords": "前端 UI"
                , "frequency": 666
                , "userNums": 333
            }, {
                "keywords": "前端 UI"
                , "frequency": 666
                , "userNums": 333
            }],
            data1 = [{
                "id": 111
                , "title": "热帖测试"
                , "username": "test"
                , "channel": "公告"
                , "href": "http://www.baidu.com/jie/15697/"
                , "crt": 61632
            }, {
                "id": 222
                , "title": "一周年"
                , "username": "猫吃"
                , "channel": "讨论"
                , "href": "http://www.baidu.com/jie/16622/"
                , "crt": 61632
            }, {
                "id": 333
                , "title": "四个月的前端"
                , "username": "fd"
                , "channel": "分享"
                , "href": "http://www.baidu.com/jie/16651/"
                , "crt": 61632
            }, {
                "id": 333
                , "title": "如何评价前端 UI 框架"
                , "username": "张三"
                , "channel": "提问"
                , "href": "http://www.baidu.com/jie/9352/"
                , "crt": 61632
            }, {
                "id": 333
                , "title": "如何评价前端 UI 框架"
                , "username": "张三"
                , "channel": "提问"
                , "href": "http://www.baidu.com/jie/9352/"
                , "crt": 61632
            }, {
                "id": 333
                , "title": "如何评价前端 UI 框架"
                , "username": "张三"
                , "channel": "提问"
                , "href": "http://www.baidu.com/jie/9352/"
                , "crt": 61632
            }, {
                "id": 333
                , "title": "如何评价前端 UI 框架"
                , "username": "张三"
                , "channel": "提问"
                , "href": "http://www.baidu.com/jie/9352/"
                , "crt": 61632
            }, {
                "id": 333
                , "title": "如何评价前端 UI 框架"
                , "username": "张三"
                , "channel": "提问"
                , "href": "http://www.baidu.com/jie/9352/"
                , "crt": 61632
            }, {
                "id": 333
                , "title": "如何评价前端 UI 框架"
                , "username": "张三"
                , "channel": "提问"
                , "href": "http://www.baidu.com/jie/9352/"
                , "crt": 61632
            }, {
                "id": 333
                , "title": "如何评价前端 UI 框架"
                , "username": "张三"
                , "channel": "提问"
                , "href": "http://www.baidu.com/jie/9352/"
                , "crt": 61632
            }],
            data2 = [{
                "prograss": "开会"
                , "time": "一小时"
                , "complete": "已完成"
                , "LAY_CHECKED": true
            }, {
                "prograss": "项目开发"
                , "time": "两小时"
                , "complete": "进行中"
                , "LAY_CHECKED": true
            }, {
                "prograss": "陪吃饭"
                , "time": "一小时"
                , "complete": "未完成"
            }, {
                "prograss": "修改小bug"
                , "time": "半小时"
                , "complete": "未完成"
            }, {
                "prograss": "修改大bug"
                , "time": "两小时"
                , "complete": "未完成"
            }, {
                "prograss": "修改小bug"
                , "time": "半小时"
                , "complete": "未完成"
            }, {
                "prograss": "修改大bug"
                , "time": "两小时"
                , "complete": "未完成"
            }];

        //今日热搜
        table.render({
            elem: '#LAY-index-topSearch'
            , data: data
            // ,url: layui.setter.paths.base + 'json/console/top-search.js' //模拟接口
            , page: true
            , cols: [[
                {type: 'numbers', fixed: 'left'}
                , {
                    field: 'keywords',
                    title: '关键词',
                    minWidth: 300,
                    templet: '<div><a href="https://www.baidu.com/s?wd={{ d.keywords }}" target="_blank" class="layui-table-link">{{ d.keywords }}</div>'
                }
                , {field: 'frequency', title: '搜索次数', minWidth: 120, sort: true}
                , {field: 'userNums', title: '用户数', sort: true}
            ]]
            , skin: 'line'
        });

        //今日热贴
        table.render({
            elem: '#LAY-index-topCard'
            , data: data1
            // , url: layui.setter.paths.base + 'json/console/top-card.js' //模拟接口
            , page: true
            , cellMinWidth: 120
            , cols: [[
                {type: 'numbers', fixed: 'left'}
                , {
                    field: 'title',
                    title: '标题',
                    minWidth: 300,
                    templet: '<div><a href="{{ d.href }}" target="_blank" class="layui-table-link">{{ d.title }}</div>'
                }
                , {field: 'username', title: '发帖者'}
                , {field: 'channel', title: '类别'}
                , {field: 'crt', title: '点击率', sort: true}
            ]]
            , skin: 'line'
        });

        //项目进展
        table.render({
            elem: '#LAY-home-homepage-console'
            , data: data2
            // , url: layui.setter.paths.base + 'json/console/prograss.js' //模拟接口
            , cols: [[
                {type: 'checkbox', fixed: 'left'}
                , {field: 'prograss', title: '任务'}
                , {field: 'time', title: '所需时间'}
                , {
                    field: 'complete', title: '完成情况'
                    , templet: function (d) {
                        if (d.complete == '已完成') {
                            return '<del style="color: #5FB878;">' + d.complete + '</del>'
                        } else if (d.complete == '进行中') {
                            return '<span style="color: #FFB800;">' + d.complete + '</span>'
                        } else {
                            return '<span style="color: #FF5722;">' + d.complete + '</span>'
                        }
                    }
                }
            ]]
            , skin: 'line'
        });

    });

    exports('console', {})
});